<template>
    <div class="container">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <h1 class="info">查看个人信息</h1>
                </div>
            </template>
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
                class="demo-ruleForm" :size="formSize" status-icon>
                <el-form-item label="用户名" prop="username" :label-style="{ fontSize: '100px' }">
                    <el-input v-model="ruleForm.username" readonly />
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="ruleForm.name" readonly />
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="ruleForm.sex" disabled>
                        <el-radio value="男">男</el-radio>
                        <el-radio value="女">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="出生日期" prop="birthday">
                    <el-input v-model="ruleForm.birthday" readonly />
                </el-form-item>
                <el-form-item label="身份证号" prop="idNum">
                    <el-input v-model="ruleForm.idNum" readonly />
                </el-form-item>
                <el-form-item label="我的积分" prop="idNum">
                    <el-input v-model="ruleForm.point" readonly />
                </el-form-item>

                <!-- 分割线 -->
                <hr class="divider">

                <el-form-item label="联系电话" prop="telephone">
                    <el-input v-model="ruleForm.telephone" :readonly="readonly" />
                </el-form-item>
                <el-form-item label="居住地址" prop="address">
                    <el-input v-model="ruleForm.address" :readonly="readonly" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="Edit(ruleFormRef)">
                        编辑
                    </el-button>
                    <el-button :disabled="disabled" @click="Save(ruleFormRef)">保存</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { reactive, ref, watchEffect } from 'vue'
import $axios from '../../../utils/axios'
import { ElDrawer, ElMessageBox, ElNotification } from 'element-plus'

const formSize = ref('default')
const ruleFormRef = ref()
const ruleForm = ref({})

const init = async () => {
    const path = '/user/selectById/' + JSON.parse(sessionStorage.getItem('user')).id
    const { data: res } = await $axios.get(path)
    if (res.code === 200) {
        ruleForm.value = res.result
        ruleForm.value.sex = res.result.sex.toString()
        ruleForm.value.token = JSON.parse(sessionStorage.getItem('user')).token
        console.log(ruleForm.value);
    }
}
init()

const readonly = ref(true)
const disabled = ref(true)
const Edit = (ruleFormRef) => {
    readonly.value = false
    disabled.value = false
    console.log(readonly.value);
}

// function updateSession(value) {
//     let preSession = JSON.parse(sessionStorage.getItem('user'))
//     Object.keys(value).forEach(function (val, key) {
//         preSession[val] = value[val]
//     })
//     sessionStorage.setItem('user', JSON.stringify(preSession))
// }

const updateForm = ref({})

const Save = async (formEl) => {
    if (!formEl) return
    // 在提交数据之前对所有的数据进行一次统一的验证
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            console.log(ruleForm.value);
            updateForm.value.id = ruleForm.value.id
            updateForm.value.telephone = ruleForm.value.telephone
            updateForm.value.address = ruleForm.value.address
            // console.log(updateForm.value);
            const path = '/user/update'
            const { data: res } = await $axios.post(path, updateForm.value)
            if (res.code === 200) {
                sessionStorage.setItem('user', JSON.stringify(ruleForm.value))
                // updateSession(updateForm.value.telephone)
                // updateSession(updateForm.value.address)
                console.log(JSON.parse(sessionStorage.getItem('user')));
                ElNotification({
                    title: '成功',
                    message: '已保存修改！',
                    type: 'success',
                })
                readonly.value = true
                disabled.value = true
            } else {
                ElNotification({
                    title: '失败',
                    message: '修改信息失败！',
                    type: 'error',
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}

const rules = reactive({
    // username: [{ required: true }],
    // name: [{ required: true }],
    // sex: [{ required: true }],
    // birthday: [{ required: true }],
    // idNum: [{ required: true }],
    telephone: [
        {
            required: true, //必填规格
            message: '请输入手机号', //违反规则提示的信息
            trigger: 'blur' //失去焦点时触发
        },
        {
            pattern: /^1[3456789]\d{9}$/,
            message: '手机号码格式不正确',
            trigger: 'blur'
        }
    ],
    address: [
        {
            required: true,
            message: '请输入居住地址',
            trigger: 'blur',
        },
    ],
    desc: [
        { required: true, message: 'Please input activity form', trigger: 'blur' },
    ],
})
// const options = Array.from({ length: 10000 }).map((_, idx) => ({
//     value: `${idx + 1}`,
//     label: `${idx + 1}`,
// }))
</script>

<style scoped>
.container {
    height: 100%;
    width: 100%;
    margin-top: 0px;
    background-color: white;
    display: flex;
}

.box-card {
    width: 50%;
    margin: 0 auto;
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid #87CEFA;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;

}

.info {
    font-size: 16px;
    text-align: center;
}



.demo-ruleForm {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    /* font-size: 30px; */
}

.demo-ruleForm .el-input {
    --el-input-width: 220px;
    font: bold 11px;
}

/* 去掉input的边框 */
/* .el-input.el-input--default { */
/* display: none; */
/* --el-input-border: none;
    --el-input-hover-border: none;
    --el-input-focus-border: none;
    --el-input-transparent-border: none;
    --el-input-border-color: none;
    --el-input-border-radius: none;
    --el-input-bg-color: none;
    --el-input-icon-color: none;
    --el-input-hover-border-color: none;
    --el-input-focus-border-color: none;
} */

/* .el-input__suffix {
    display: none;
} */
/* .el-form-item--feedback .el-input__validateIcon {
    display: none;
} */
/* .el-input__suffix-inner {
    display: none;
} */
/* .el-icon.el-input__icon.el-input__validateIcon {
    display: none;
} */
/* .el-icon.svg {
    height: 0em;
    width: 0em;
} */

.divider {
    width: 200%;
    border: none;
    border-top: 1px solid #000;
    margin-left: -200px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-top: 1px dashed #ccc;

}
</style>
